<script setup lang="ts">
defineOptions({
  name: "modelProgress"
});
import { ref } from "vue";

const props = defineProps(["percentage"]);

const progressColors = [
  { color: "#3B82F6", percentage: 100 },
  { color: "#F26060", percentage: 1000 }
];
</script>

<template>
  <px-progress
    type="dashboard"
    :percentage="percentage"
    width="90"
    class="small-progress"
    :color="progressColors"
    :indeterminate="true"
    :duration="1"
  >
    <template #default="{ percentage }">
      <div class="progress-content">
        <px-icon v-if="percentage >= 100"><InfoCircle /></px-icon>
        <span
          :class="['percentage-value', percentage >= 100 ? 'warning' : 'num']"
          >{{ percentage }}%</span
        >
      </div>
    </template>
  </px-progress>
</template>

<style lang="scss" scoped>
.progress-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;

  .px-icon {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #f26060;
  }

  .percentage-value {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #333;
  }

  .num {
    color: #3b82f6;
  }

  .warning {
    color: #f26060;
  }
}
</style>
